<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue2.5.15.js"></script>
</head>
<body>
<div id="app">
    <div class="content">
        <input type="button" value="销毁" @click="destroyVM">
        <p v-show="show">Vue生命周期</p>
    </div>
</div>
</body>
<script>
    const vm = new Vue(
        {
            el:"#app",
            data:{
                show:true,
                intervalId:"",
            },
            beforeCreate(){
                console.log("beforeCreated()")
            },
            created(){
                console.log("created()")
            },
            beforeMount(){
                console.log("beforeMount()")
            },

            mounted(){//第一个阶段，初始化显示之后，会立即调用
                console.log("mounted()")
                var i=0
                this.intervalId=setInterval(()=>{
                    // console.log("i======="+i)
                    this.show = this.show
                    i++;
                },1000)
            },


            beforeUpdate(){
                console.log("beforeUpdate()")
            },
            updated(){
                console.log("updated()")
            },

            beforeDestroy(){//第三个阶段，vm实例消亡之前会调用
                // console.log("this.intervalId===="+this.intervalId)
                console.log("beforeDestroy()")
                clearInterval(this.intervalId)
            },

            destroyed(){
                console.log("destroyed")
            },
            methods:{
                destroyVM(){
                    //直接调用destroy方法，vm实例会销毁，但是定时器会一直执行，需要手动清除，
                    //清除定时器的操作要放到beforeDestroy里面去执行
                    this.$destroy()
                }
            }
        }
    )
</script>
</html>
